<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>YN</title>
    <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${basePath}/js/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="${basePath}/alert/iosOverlay.css">
 	<script src="${basePath}/alert/iosOverlay.js"></script>
    <style type="text/css">
    	/*禁止拖动时文本被选中*/
    	li{
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
    </style>
    <script type="text/javascript">
   		var lastMessageTime = 0;
   		var flag = 0;
    	function heartbeat(){
    		var name = $("iframe").contents().find("body").attr("name");
			if(name == "login"){
				location.href = "${basePath}";
			}
    		$.ajax({
				type:"post",
				url:"${basePath}/heartbeat/${user.id}",
				dataType:"json",
				success:function(data){
					var jsonObject = data;
					var newMessageTime = jsonObject.newMessageTime;
					
					if(flag == 0){
						lastMessageTime = newMessageTime;
						flag = 1;
					} else {
						if(newMessageTime > lastMessageTime){//有新消息时
							//iosOverlay({text: "新消息！",duration: 1e3,icon: "${basePath}/alert/check.png"});
							$("#bgm").html('<embed src="${basePath}/alert/bgm.wav" autostart="false" loop="false"/>');
							lastMessageTime = newMessageTime;
							var name = $("iframe").contents().find("body").attr("name");
							if(name == "session"){
								$("iframe").attr("src","${basePath}/session");
							} else if(name == "ssnchat") {
								$("iframe")[0].contentWindow.getmessage();
							}
						}
					}
					$("#messageCount").html(jsonObject.count);
				}
			});
    	}
    </script>
    <script type="text/javascript">
			$(function(){
				heartbeat();
				window.setInterval("heartbeat()", 500);
				var flag = 0;
				
				//悬浮窗效果
				$("li").click(function(){
					$(this).attr("class","active");
					$(this).siblings().removeAttr("class","active");
				});
				
				//如果是电脑
				if(window.screen.width > 500 && window.screen.height > 500){
					//需要修改的尺寸
					$("body").css("min-width","468px");
					$("body>div").css("width","468px");
					$("body>div").css("margin","-240px -234px");
					//鼠标拖动
					$("ul").mouseover(function(){
						$(this).css("cursor","move");//改变鼠标指针的形状
					});
	      		$("ul").mousedown(function(e){//e鼠标事件  
						var offset = $(this).offset();//DIV在页面的位置  
						var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离  
						var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离  
						$(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件  
							$("ul").stop();//加上这个之后  
							var _x = ev.pageX - x;//获得X轴方向移动的值  
							var _y = ev.pageY - y;//获得Y轴方向移动的值  
							$("ul").animate({left:_x+"px",top:_y+"px"},10);  
						});  
					});  
					$(document).mouseup(function(){  
						$("ul").css("cursor","default");  
						$(this).unbind("mousemove");  
					});
				} else {
					//手机移动悬浮窗
					$("ul>div span").attr("class","glyphicon glyphicon-chevron-down");
					$("ul>div span").click(function(e){
						if(flag == 0){
							$(this).attr("class","glyphicon glyphicon-chevron-up");
							$("ul").css("top",$(window).height()-60+"px");
							flag = 1;
						} else {
							$(this).attr("class","glyphicon glyphicon-chevron-down");
							$("ul").css("top","10px");
							flag = 0;
						}
					});
				}
			});
			
			function mainFrame(i){
    		if(i == 1)
    			$('iframe').attr('src','${basePath}/session');
    		else if(i == 2)
    			$('iframe').attr('src','${basePath}/friend');
    		else if(i == 3)
    			$('iframe').attr('src','${basePath}/setting');
    	}
    </script>
  </head>
  <body style="background: url(${basePath}/img/loginbg.jpg);position: absolute;min-width: 310px;min-height: 480px;width: 100%;height: 100%;">
  		<div id="bgm" style="opacity: 0;"></div>
		<ul class="nav nav-pills panel panel-default" role="tablist"
			 style="z-index: 9999;opacity: 0.75;border: 1px solid #428bca;width: 240px;height: 52px;padding-left: 5px;padding-top: 5px;position: fixed;left: 10px;top: 10px;">
		  <li role="presentation" class="active"><a href="javascript:void(0)" onclick="mainFrame(1)">消息<span class="badge" id="messageCount"></span></a></li>
		  <li role="presentation"><a href="javascript:void(0)" onclick="mainFrame(2)">好友</a></li>
		  <li role="presentation"><a href="javascript:void(0)" onclick="mainFrame(3)">设置</a></li>
		  <div><span class="glyphicon glyphicon-th" aria-hidden="true" style="font-size: 20px;left: 5px;top: 9px;"></span></div>
		</ul>
  	<div style="width: 310px;height: 480px;position: absolute;left: 50%;top: 50%;margin: -240px -155px;z-index: 1;">
		  <iframe style="width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;" src="${basePath}/session" class="panel panel-default"></iframe>
  	</div>
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
  </body>
</html>